<template>
  <div class="kw-componentview">
    <label class="kw-componentview-label">{{item.label}}</label>
    <div class="kw-componentview-area">
      <span class="emptytip" v-if="item.components.length<=0">可拖入多个组件</span>
      <div class="kw-componentgroup dropbody">
        <div class="kw-dragging-mark" v-if="item.InTableCanvas==0"></div>
        <div v-for="(comp, index) in item.components" :key="index">
          <div>
            <draggable @on-mousedown="mouseDown" @on-dragstart="movestart"
                       v-bind:class="['kw-component-' + comp.type, item.selected?'active':'']">
              <div class="kw-remove icon icon-close" @click="close"></div>
              <div class="kw-overlay"></div>
              <component :is="component(comp)" :item="comp"></component>
            </draggable>
            <div class="kw-dragging-mark" v-if="item.InTableCanvas==index+1"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="kw-componentview-adddetail">
      <i class="iconfont icon-add"></i>
      <span>{{item.defaultAction}}</span>
    </div>
  </div>
</template>

<script>
  import Draggable from '../components/draggable'
  export default {
    name: 'table-widget',
    props: {
      item: {
        default() {
          return {
            components: []
          }
        }
      }
    },
    computed: {
      component() {
        return function(item) {
          let config = Object.assign({}, {component: item.component})
          return config.component
        }
      }
    },
    components: {
      Draggable
    },
    methods: {
      mouseDown(e) {
        this.$emit('on-mousedown', e)
      },
      movestart(e) {
        this.$emit('on-movestart', e)
      },
      close(e) {
        this.$emit('on-close', e)
      }
    }
  }
</script>

<style>

</style>